import Taro, { Component } from '@tarojs/taro'
import { View, Text, Picker,Image ,Input} from '@tarojs/components'
import './notFound.css'
import { AtAvatar, AtList, AtListItem, AtInput, AtForm, AtButton, AtGrid,AtSearchBar,AtTag } from "taro-ui"
import app from '../../main';

export default class NotFound extends Component {

    config = {
        navigationBarTitleText: '搜索'
    }
    constructor () { 
        super(...arguments); 
        this.state = {
            value: '',
            notfound :'https://zhongsheng.bayou-tech.cn/img/imgs/notfound.png',
            tags:[]
        }
    }
    onChange (value) {
        this.setState({
            value: value
        })
    }

    //点击搜索，跳转
    onActionClick () {
        app.redirectTo('../findDoctor/findDoctor?keyword='+ this.state.value)
    }

    //点击热门搜索，跳转
    click(keyword){
        app.redirectTo('../findDoctor/findDoctor?keyword='+ keyword)
    }

    //get 标签
    get(){
        let me = this
        let data = {
            offset: 0,
            length: 9
        }
        app.get('web/search_records/hotSearchList', data, function(res){
            console.log(res)
            let list = res.data.result.list
            me.setState({
                tags:list
            })
        })
    }

    componentWillMount(){
        this.get();
        // this.getMsg();
    }

  render () {
    return (
      <View className='index'>

        <View className='inputBox'>
            <AtSearchBar
                className='searchInput'
                actionName='搜一下'
                value={this.state.value}
                onChange={this.onChange.bind(this)}
                onActionClick={this.onActionClick.bind(this)}
            />        
        </View>

        <View className='body'>
            <Image className='notFound' src={this.state.notfound}/>
            <View className='text-a'>没有找到匹配的结果</View>
            <View className='text-b'>您可以试试下面的建议搜索</View>
        </View>

        <View className='tagbox'>
            <View className='text-c'>热门搜索</View>
            <View className='btnBox'>
                {
                    this.state.tags.map((item) =>{
                        return <AtButton onClick={this.click.bind(this,item.content)} className='tag' type='secondary' size='small'>{item.content}</AtButton>                 
                    })
                }
            </View>
        </View>

      </View>
    )
  }
}

